@import '../styles/antd-custom.less';
@import '../styles/variables.less';

.welcomeContainer {
  padding: 0;
  overflow-x: hidden;
}

// 顶部横幅区域
.hero {
  display: flex;
  align-items: center;
  padding: 60px 40px;
  background: linear-gradient(135deg, #f5f7ff 0%, #e6f7ff 100%);
  border-radius: 8px;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 380px;
    height: 380px;
    background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    opacity: 0.1;
  }
}

.heroContent {
  width: 60%;
  z-index: 1;
}

.heroTitle {
  font-size: 2.8rem !important;
  line-height: 1.2 !important;
  margin-bottom: 20px !important;
  color: #1f1f1f;
}

.highlight {
  color: @primary-color;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background-color: fade(@primary-color, 20%);
    border-radius: 4px;
    z-index: -1;
  }
}

.heroDesc {
  font-size: 1.2rem !important;
  margin-bottom: 30px !important;
  color: #666;
  max-width: 600px;
}

.heroImage {
  flex: 1;
  height: 360px;
  background-image: url('https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*43rfS4dD0MUAAAAAAAAAAABkARQnAQ');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
}

// 统计数据区域
.statsSection {
  background-color: #fafafa;
  padding: 30px;
  border-radius: 8px;
  margin-bottom: 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

  :global {
    .ant-statistic-title {
      font-size: 1rem;
    }

    .ant-statistic-content {
      font-size: 1.8rem;
      color: @primary-color;
    }

    .ant-statistic-content-prefix {
      margin-right: 8px;
    }
  }
}

// 核心功能区域
.featuresSection {
  padding: 20px 0 40px;
}

.sectionTitle {
  text-align: center;
  margin-bottom: 30px !important;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: @primary-color;
    border-radius: 3px;
  }
}

.featureCard {
  height: 100%;
  transition: all 0.3s;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  }

  :global(.ant-card-body) {
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}

.featureIcon {
  font-size: 2.5rem;
  margin-bottom: 16px;
  color: @primary-color;
  line-height: 1;
}

.featureTitle {
  margin-bottom: 12px !important;
}

.featureDesc {
  color: rgba(0, 0, 0, 0.65);
  flex-grow: 1;
}

// 使用场景区域
.useCasesSection {
  padding: 20px 0 40px;
}

.useCaseItem {
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  background-color: #fafafa;
  transition: all 0.3s;

  &:hover {
    background-color: #f0f5ff;
  }
}

.useCaseAvatar {
  background-color: @primary-color;
}

// 欢迎使用区域
.welcomeUser {
  text-align: center;
  padding: 40px 0;
  margin-top: 20px;
  background: linear-gradient(135deg, #f9f9f9 0%, #f0f5ff 100%);
  border-radius: 8px;
}
